<template>
  <div class="container">
    <leftMenu ref="menu" @collapse="collapse" @changeGroup="changeGroup" :lng="language"/>
    <div class="main-content">
      <toolbar v-on="$listeners" v-if="toolbar">
        <slot name="toolbar" />
      </toolbar>
      <div class="x6-funtoolbar">
          <slot name="funtoolbar" />
        </div>
      <div
        :id="containerId"
        class="content-container"
        :class="{ 'content-container-toolbar': toolbar }"
      ></div>
      <!-- tooltip 组件 -->
    <div v-if="hoveredNode" class="tooltipNode" :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }">
      <p v-if="hoveredNode.pluginName">{{hoveredNode.pluginName}}</p>
      <p v-if="hoveredNode.note">{{hoveredNode.note}}</p>
    </div>
   
    </div>
    <div id="miniMap" class="mini-map" />
  </div>
</template>

<script>
import toolbar from "./toolbar";
import "./common/graph-common/connector";
import "./common/shape/node.js";
import { initGraph, getGraph } from "./common/graph-common/graph";
import { initEvents } from "./common/events";
import leftMenu from "./common/menu";
import { generateId } from "./utils/graph";
import testnode from "./common/shape/node.vue";
import { Graph } from "@antv/x6";
export default {
  name: "X6Editor",
  props: {
    //是否显示左侧菜单
    leftMenu: {
      type: Boolean,
      default: true,
    },
    //是否显示toolbar
    toolbar: {
      type: Boolean,
      default: true,
    },
    //是否为圆角Node
    round: {
      type: Boolean,
      default: false,
    },
    //允许有多个父节点
    multiParent: {
      type: Boolean,
      default: false,
    },
    language:{
      type:String,
      default:'zh-CN'
    }
  },
  components: {
    toolbar,
    leftMenu,
  },
  data() {
    return {
      containerId: "",
      data: {},
      graph: null,
      selectNodeSub: null,
      readOnly: false,
      btnDisabled:false,
      hoveredNode:null,
      tooltipLeft: 0,
      tooltipTop: 0,
    };
  },
  mounted() {
    //  this.init();
  },
  provide() {
    return {
      app: this,
    };
  },
  methods: {
    testcell(){
      this.graph.clearCells();
    },
    refresh(){
      this.graph.clearCells(); // 清除现有的流程图
    },
    againinit(json){
      this.graph.fromJSON(json);
    },
    setBtnDisabled(flag=true) {
      this.btnDisabled = flag;
    },
    setReadOnly() {
      this.graph.freeze();
      this.readOnly = true;
    },
    setSelected(data) {
      const nodes = this.graph.getNodes();
      const node = nodes.find((item) => item.id === data.id);
      this.graph.select(node);
    },
    fromJSON(json) {
      //处理由于scopeId导致vue组件回显bug
      if(Array.isArray(json)){
        json.forEach(item=>{
          if(item?.component?.components?.testnode?._scopeId){
            delete item.component.components.testnode._scopeId
          }
        })
      }else{
        json?.cells?.forEach(item=>{
          if(item?.component?.components?.testnode?._scopeId){
            delete item.component.components.testnode._scopeId
          }
        })
      }
      this.graph.fromJSON(json);
    },
    init(groups, nodes,taskgroup) {
      Graph.registerVueComponent(
        "testnode",
        {
          template: `<testnode />`,
          components: {
            testnode,
          },
        },
        true
      );
      this.containerId = "container-" + generateId();
      this.$nextTick(() => {
        const option = {
          id: this.containerId,
          multiParent: this.multiParent,
        };
        initGraph(option);
        this.graph = getGraph();
        this.graph.isRound = this.round;
        initEvents();
        this.$refs.menu.init(groups, nodes, taskgroup);
        this.initEvents();
      });
    },
    initEvents() {
      //右键事件
      this.graph.on("cell:contextmenu", (args) => {
        this.$emit("rightClick", args);
      });
      //双击node事件
      this.graph.on("cell:dblclick", (args) => {
        this.$emit("doubleClick", args);
      });
      //单击node事件
      this.graph.on("cell:click", (args) => {
        this.$emit("click", args);
      });
      this.graph.on("node:added", (args) => {
        this.$emit("addNode", args);
      });
      this.graph.on("edge:connected", (args) => {
        this.$emit("connectedEdge", args);
      });
      this.graph.on("edge:removed", (args) => {
        this.$emit("removedEdge", args);
      });
      // //点击
      // Vue.prototype.$eventBus.$on("configNode", (data) => {cv cvc cv
      //   this.$emit("configNode", data);
      // });
      this.graph.on("cell:mouseenter", (args) => {
        const cell = args.cell;
        if (cell.id) {
          this.hoveredNode = cell.data.node;
          this.tooltipLeft = args.e.originalEvent.clientX - 470; // 设置 tooltip 距离鼠标的左偏移量
          this.tooltipTop = args.e.originalEvent.clientY -40; // 设置 tooltip 距离鼠标的上偏移量
        }
      });
      this.graph.on("cell:mouseleave", () => {
        this.hoveredNode = null;
      });

    },
     //折叠事件
    collapse(flag){
      this.$emit("collapse", flag);
    },
    //设置node显示名称
    changeNodeName(data, name) {
      data.cell.setAttrs({
        label: { text: name },
      });
      data.cell.setData({ text: name });
    },
    //删除节点/边
    delete(data) {
      this.graph.removeCells([data.cell]);
    },
    changeGroup(group){
      this.$emit('changeGroup', group)
    }
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.main-content {
  width: 100%;
  position: relative;
}
.x6-funtoolbar{
  position: absolute;
  z-index: 9;
}
/deep/.content-container {
  width: 100% !important;
  height: 100% !important;
}

/deep/.content-container-toolbar {
  height: calc(100% - 36px) !important;
}

.mini-map {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.tooltipNode {
  position: absolute;
  z-index: 111;
  background: #FFF;
  border: 1px solid #303133;
  margin-left: 12px;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  width: 200px;
  word-wrap: break-word;
 
}
</style>